<template>
  <div class="full rec">
    <!-- 动画 -->
    <div class="linel"></div>
    <!-- 动画 -->
    <div class="fc" id="play_window"></div>
    <!-- <video
      ref="videoplayer"
      class="videoplayer"
      width="100%"
      height="100%"
      controls
      autoplay
    >
      <source
        src="/images/new/mp4.mp4"
        type="video/mp4"
      />
      您的浏览器不支持 video 标签。
    </video> -->
    <canvas class="full cv" id="arcv" v-if="!state.zoom"></canvas>
    <div class="fc mb" :class="props.ev ? 'mbbj' : ''" v-if="!state.zoom">
      <div
        class="bq"
        v-for="(item, index) in state.blist"
        :key="index"
        :title="item.tagName"
        @click="bqclick(item)"
        :style="'left:' + item.x + ';top:calc(' + item.y + ' - 65px);'"
        style="text-align: center; width: 100px"
      >
        <!-- :style="'left:' + item.x + ';top:calc(' + item.y + ' - 65px);'" -->
        <img
          class="centericon"
          :style="setStyle(item)"
          :src="item.lightenIcon"
        />
        <p class="tagname" v-show="props.istw">{{ item.tagName }}</p>
        <!-- <img
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/tag/jck.png"
        />
        <img
          v-if="item.dataType == 'road'"
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/tag/road.png"
        />
        <img
          v-if="item.dataType == 'jksb'"
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/tag/jksb.png"
        />
        <img
          v-if="item.dataType == 'xxyl'"
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/tag/xxyl.png"
        /> -->
        <!-- <img
          v-if="index === 0"
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/centericon.png"
        />
        <img
          v-else-if="index === 1"
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/tag/tag1.png"
        />
        <img
          v-if="index === 2"
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/tag/tag2.png"
        />
        <img
          v-else
          class="centericon"
          :style="setStyle(item)"
          src="/images/new/tag/tag3.png"
        /> -->
        <!-- <img
          class="img"
          :src="item.high ? '/images/bh.png' : '/images/bl.png'"
        />
        <img class="img1" :src="item.high ? item.lightenIcon : item.icon" /> -->
        <!-- <div class="line">&nbsp;</div> -->
        <!-- <div :class="item.high ? 'txt txt2' : 'txt'">
          <span class="con">{{ item.tagName }}</span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import emitter from "@/utils/mitt";
const props = defineProps({
  vid: String,
  ev: {
    type: Boolean,
    default: false,
  },
  istw: {
    type: Boolean,
    default: false,
  },
});

const setStyle = (item) => {
  const scale = 0.4 + parseFloat(item.y) * 0.009; // 根据距离调整缩放比例
  return {
    // left: item.x,
    // top: `calc(${item.y} - 65px)`,
    transform: `scale(${scale})`,
  };
};

const emit = defineEmits([
  "change",
  "back",
  "list",
  "alarm",
  "reget",
  "setdiruction",
]);
const state = reactive({
  socket: null,
  ctx: null, //画布
  deviceId: "",
  myPlugin: null,
  curIndex: 0,
  zoom: false,
  types: [],
  vid: "",
  did: "", //关联动点id
  rtspvid: "",
  rtspdid: "",
  ptz: { p: 1, t: 1, z: 1 },
  datalist: [],
  blist: [],
  numTime: 0, //双击计数
  time: null,
});
watch(
  () => props.vid,
  (newval) => {
    if (newval != state.vid || newval == "") getData();
    wsconnect();
  }
);
watch(
  () => props.tps,
  (newval) => {
    // filterData();
  }
);
const setTypes = (val) => {
  filterType.value = val.type;
  state.types = val.list;
  // filterData();
  filterDataList();
};

const todel = (e) => {
  let pm = {
    tagId: e.tagId,
  };
  ElMessageBox.confirm("确认删除当前标签？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    useApi.post("/dynamicview/ar/camera/deletetag", pm).then((res) => {
      emit("reget");
    });
  });
};

const bqclick = (e) => {
  console.log(e);
  state.numTime++;
  window.getSelection
    ? window.getSelection().removeAllRanges()
    : document.selection.empty();
  state.time = setTimeout(() => {
    if (state.numTime == 2) {
      clearTimeout(state.time);
      // emit("change", e, true);e
      todel(e);
    } else {
      // console.log(e)
      // e.categoryId = '1896747873421365248'
      emit("change", e, false);
    }
    state.numTime = 0;
  }, 300);
};
const wsconnect = () => {
  const config = useRuntimeConfig();
  if (!props.vid) return;
  let url = config.public.wssBase + props.vid;
  if (state.socket != null) {
    state.socket.close();
  }
  state.socket = new WebSocket(url);
  state.socket.onopen = function (e) {
    console.log("wsopen", e);
  };
  //错误重新连接
  state.socket.onerror = function (e) {
    // wsconnect();
  };
  let timer = null;
  //接收消息
  state.socket.onmessage = function (e) {
    //console.log(e)
    try {
      let msg = JSON.parse(e.data);
      if (msg.deviceId == "IPAD" && msg.deviceName) {
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(() => {
          emitter.emit("setInstruction", msg);
        }, 2000);
      }
      if (!msg.description) return;
      emit("alarm", msg);

      // if (msg.msgtype == "ptzchange") {
      //   let p = parseFloat(msg.ptzPanpos);
      //   let t = parseFloat(msg.ptzTiltpos);
      //   let z = parseFloat(msg.ptzZoompos);
      //   if (p != state.ptz.p && t != state.ptz.t && z != state.ptz.z) {
      //     state.ptz.p = p;
      //     state.ptz.t = t;
      //     state.ptz.z = z;
      //     //缓存,给标签添加用
      //     let store = useMyStore();
      //     store.params.ptz = state.ptz;
      //     //按ptz新条件 过滤
      //     filterData();
      //   }
      // } else if (msg.msgtype == "alarm") {
      //   emit("alarm", msg.content);
      // }
    } catch {}
  };
};
const getTypes = () => {
  useApi
    .post("/dynamicview/ar/tagcategory/list", {
      tagCategoryName: "",
      tagCategoryState: null,
    })
    .then((res) => {
      let types = res.data.tagCategoryList || [];
      state.types = types.map((x) => x.tagCategoryId);
      // getData(); --2月21日屏蔽
    });
};

const getData = (reget = false) => {
  let route = useRoute();
  let queryHigh = route.query.high;
  useApi
    .post("/dynamicview/ar/defaulthighInfo", { cameraId: props.vid ? props.vid : queryHigh ? queryHigh : '' })
    .then((res) => {
      emit("setdiruction", res.data.direction); //通知父组件，当前高点id
      state.vid = res.data.cameraId;
      state.did = res.data.movedCameraId || "";
      state.rtspvid = res.data.cameraIndexCode;
      state.rtspdid = res.data.movedCameraIndexCode || "";
      let datalist = res.data.tagList || [];
      //处理数据
      //获取当前宽高
      let w = document.documentElement.clientWidth;
      let h = document.documentElement.clientHeight;
      //处理标签位置数据
      datalist.forEach((element) => {
        try {
          if (element.graphType != "line") {
            let data = JSON.parse(element.graphData);
            let pos = data.data;
            let len = data.data.length;
            let ct = { x: 0, y: 0 };
            pos.forEach((one) => {
              ct.x += parseFloat(one.x);
              ct.y += parseFloat(one.y);
              one.x = w * one.x;
              one.y = h * one.y;
            });
            //计算中心点
            ct.x /= len;
            ct.y /= len;
            ct.x = "" + ct.x * 100 + "%";
            ct.y = "" + ct.y * 100 + "%";

            element.x = ct.x;
            element.y = ct.y;
            element.pos = pos;
            element.type = data.type;
          } else {
            let data = JSON.parse(element.graphData);
            let pos = data.data;
            let len = data.data.length;
            let ct = { x: 0, y: 0 };
            if (pos.length > 2) {
              let middleIndex = Math.floor(pos.length / 2);
              pos.forEach((one, index) => {
                if (index == middleIndex) {
                  ct.x = parseFloat(one.x);
                  ct.y = parseFloat(one.y);
                }
                one.x = w * one.x;
                one.y = h * one.y;
              });
              //计算中心点
              ct.x /= 1;
              ct.y /= 1;
              ct.x = "" + ct.x * 100 + "%";
              ct.y = "" + ct.y * 100 + "%";
            } else {
              pos.forEach((one) => {
                ct.x += parseFloat(one.x);
                ct.y += parseFloat(one.y);
                one.x = w * one.x;
                one.y = h * one.y;
              });
              //计算中心点
              ct.x /= len;
              ct.y /= len;
              ct.x = "" + ct.x * 100 + "%";
              ct.y = "" + ct.y * 100 + "%";
            }

            element.x = ct.x;
            element.y = ct.y;
            element.pos = pos;
            element.type = data.type;
          }
        } catch {}
        element.high = false;
      });
      state.datalist = datalist;
      //过滤
      filterData();
      if (!reget) {
        play();
        wsconnect();
        emit(
          "back",
          state.vid,
          state.did,
          state.rtspvid,
          state.rtspdid,
          res.data.irtCameraIndexCode
        ); //通知父组件，当前高点id
      }
    })
    .catch((err) => {
      let res = {
        data: {
          cameraId: "1849283072273551360",
          tagList: [
            {
              dataType: "crk",
              clused: false,
              tagId: "1859545521434267648",
              tagName: "办公区",
              categoryId: "1846861780832358402",
              icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/serv.png",
              lightenIcon:
                "https://zxz.linghang.tech:18818/vmp-ar-icon/serv-lighten.png",
              ptzZoompos: "1",
              ptzPanpos: "1",
              ptzTiltpos: "1",
              graphType: "point",
              graphData:
                '{"type":1,"data":[{"x":0.35833333333333334,"y":0.577124868835257}]}',
            },

            {
              dataType: "road",
              tagId: "1861954313941815296",
              tagName: "停靠区",
              categoryId: "1846861780832358402",
              icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/serv.png",
              lightenIcon:
                "https://zxz.linghang.tech:18818/vmp-ar-icon/serv-lighten.png",
              ptzZoompos: "1",
              ptzPanpos: "1",
              ptzTiltpos: "1",
              graphType: "point",
              graphData:
                '{"type":1,"data":[{"x":0.5375,"y":0.44805876180482684}]}',
            },

            {
              dataType: "jksb",
              tagId: "1868489050965544960",
              tagName: "路",
              categoryId: "1846861780832358402",
              icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/serv.png",
              lightenIcon:
                "https://zxz.linghang.tech:18818/vmp-ar-icon/serv-lighten.png",
              ptzZoompos: "1",
              ptzPanpos: "1",
              ptzTiltpos: "1",
              graphType: "line",
              graphData:
                '{"type":2,"data":[{"x":0.5275510204081633,"y":0.2795358649789029},{"x":0.6989795918367347,"y":0.6118143459915611},{"x":0.8561224489795919,"y":0.7362869198312236},{"x":0.8561224489795919,"y":0.7362869198312236}]}',
            },
            {
              dataType: "xxyl",
              tagId: "1890289585217474560",
              tagName: "环境检测",
              categoryId: "1846861780832358401",
              icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/env.png",
              lightenIcon:
                "https://zxz.linghang.tech:18818/vmp-ar-icon/env-lighten.png",
              ptzZoompos: "1",
              ptzPanpos: "1",
              ptzTiltpos: "1",
              graphType: "point",
              graphData:
                '{"type":1,"data":[{"x":0.48646475475743767,"y":0.8209876543209876}]}',
            },
            // {
            //   tagId: "1890291591344689152",
            //   tagName: "测试",
            //   categoryId: "1846861780832358402",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/serv.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/serv-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "line",
            //   graphData:
            //     '{"type":2,"data":[{"x":0.5641919056553203,"y":0.26666666666666666},{"x":0.6419190565532029,"y":0.30246913580246915}]}',
            // },
            // {
            //   tagId: "1890291650765393920",
            //   tagName: "2",
            //   categoryId: "1846861780832358400",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/sense.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/sense-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "point",
            //   graphData:
            //     '{"type":1,"data":[{"x":0.7132136156526401,"y":0.13209876543209875}]}',
            // },
            // {
            //   tagId: "1890291774547693568",
            //   tagName: "22",
            //   categoryId: "1846861780832358402",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/serv.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/serv-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "point",
            //   graphData:
            //     '{"type":1,"data":[{"x":0.6724738675958188,"y":0.17777777777777778}]}',
            // },
            // {
            //   tagId: "1891412938384871424",
            //   tagName: "33",
            //   categoryId: "1846861780832358400",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/sense.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/sense-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "point",
            //   graphData:
            //     '{"type":1,"data":[{"x":0.3614583333333333,"y":0.5697796432318992}]}',
            // },
            // {
            //   tagId: "1861981283060682752",
            //   tagName: "停车场",
            //   categoryId: "1846861780832358402",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/serv.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/serv-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "point",
            //   graphData:
            //     '{"type":1,"data":[{"x":0.18333333333333332,"y":0.583420776495278}]}',
            // },
            // {
            //   tagId: "1868489242179670016",
            //   tagName: "停车场",
            //   categoryId: "1846861780832358402",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/serv.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/serv-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "polygon",
            //   graphData:
            //     '{"type":3,"data":[{"x":0.17448979591836736,"y":0.33016877637130804},{"x":0.37244897959183676,"y":0.44936708860759494},{"x":0.19183673469387755,"y":0.9166666666666666},{"x":0.00816326530612245,"y":0.509493670886076},{"x":0.00816326530612245,"y":0.509493670886076},{"x":0.17448979591836736,"y":0.33016877637130804}]}',
            // },
            // {
            //   tagId: "1890289810749394944",
            //   tagName: "港区运营",
            //   categoryId: "1846863886985334785",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/port.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/port-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "point",
            //   graphData:
            //     '{"type":1,"data":[{"x":0.5138032699008309,"y":0.6148148148148148}]}',
            // },
            // {
            //   tagId: "1891411788327686144",
            //   tagName: "1",
            //   categoryId: "1846861780832358400",
            //   icon: "https://zxz.linghang.tech:18818/vmp-ar-icon/sense.png",
            //   lightenIcon:
            //     "https://zxz.linghang.tech:18818/vmp-ar-icon/sense-lighten.png",
            //   ptzZoompos: "1",
            //   ptzPanpos: "1",
            //   ptzTiltpos: "1",
            //   graphType: "point",
            //   graphData:
            //     '{"type":1,"data":[{"x":0.38645833333333335,"y":0.2738719832109129}]}',
            // },
          ],
          movedCameraId: "1849283072273551361",
        },
      };

      state.vid = res.data.cameraId;
      state.did = res.data.movedCameraId || "";
      let datalist = res.data.tagList || [];
      //处理数据
      //获取当前宽高
      let w = document.documentElement.clientWidth;
      let h = document.documentElement.clientHeight;
      //处理标签位置数据
      datalist.forEach((element) => {
        try {
          let data = JSON.parse(element.graphData);
          let pos = data.data;
          let len = data.data.length;
          let ct = { x: 0, y: 0 };
          pos.forEach((one) => {
            ct.x += parseFloat(one.x);
            ct.y += parseFloat(one.y);
            one.x = w * one.x;
            one.y = h * one.y;
          });
          //计算中心点
          ct.x /= len;
          ct.y /= len;
          ct.x = "" + ct.x * 100 + "%";
          ct.y = "" + ct.y * 100 + "%";

          element.x = ct.x;
          element.y = ct.y;
          element.pos = pos;
          element.type = data.type;
        } catch {}
        element.high = false;
      });
      state.datalist = datalist;
      if (!reget) {
        play();
        wsconnect();
        emit("back", state.vid, state.did, state.rtspvid, state.rtspdid); //通知父组件，当前高点id
      }
    });
};
const initctx = () => {
  let canvas = document.getElementById("arcv");
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
  state.ctx = canvas.getContext("2d");
};

const drawLine = (list, isp = false) => {
  state.ctx.beginPath();
  state.ctx.moveTo(list[0].x, list[0].y);
  for (let i = 1; i < list.length; i++) {
    state.ctx.lineTo(list[i].x, list[i].y);
  }

  state.ctx.strokeStyle = "#2EE3FFFF";
  state.ctx.lineWidth = 3;
  state.ctx.stroke();
  if (isp) {
    state.ctx.fillStyle = "#2EE3FF33";
    state.ctx.fill();
  }
  state.ctx.closePath();
};
const draw = () => {
  //清空
  let w = document.documentElement.clientWidth;
  let h = document.documentElement.clientHeight;
  state.ctx.clearRect(0, 0, w, h);
  //按位置数据画图
  state.blist.forEach((element) => {
    //不是点，画图
    if (element.type != 1) {
      drawLine(element.pos, element.type == 3);
    }
  });
};
//根据ptz和类型过滤显示标签
const filterData = () => {
  //按ptz过滤,范围处理，波动10%认可
  let p1 = state.ptz.p * 0.9;
  let p2 = state.ptz.p * 1.1;
  let t1 = state.ptz.t * 0.9;
  let t2 = state.ptz.t * 1.1;
  let z1 = state.ptz.t * 0.9;
  let z2 = state.ptz.t * 1.1;

  let data = state.datalist.filter(
    (x) =>
      x.ptzPanpos >= p1 &&
      x.ptzPanpos <= p2 &&
      x.ptzTiltpos >= t1 &&
      x.ptzTiltpos <= t2 &&
      x.ptzZoompos >= z1 &&
      x.ptzZoompos <= z2
  );
  //按标签过滤
  // let data2 = data.filter((x) => state.types.includes(x.categoryId));
  let data2 = data;
  // debugger;
  state.blist = data2;
  emit("list", data2);
  //过滤完数据，画图
  setTimeout(() => {
    draw();
  }, 1000);
};

let filterType = ref(["point", "line", "polygon"]);

const filterDataList = () => {
  //按ptz过滤,范围处理，波动10%认可
  let p1 = state.ptz.p * 0.9;
  let p2 = state.ptz.p * 1.1;
  let t1 = state.ptz.t * 0.9;
  let t2 = state.ptz.t * 1.1;
  let z1 = state.ptz.t * 0.9;
  let z2 = state.ptz.t * 1.1;

  let data = state.datalist.filter(
    (x) =>
      x.ptzPanpos >= p1 &&
      x.ptzPanpos <= p2 &&
      x.ptzTiltpos >= t1 &&
      x.ptzTiltpos <= t2 &&
      x.ptzZoompos >= z1 &&
      x.ptzZoompos <= z2
  );
  let data2 = data.filter(
    (x) =>
      state.types.includes(x.tagId) &&
      filterType.value.indexOf(x.graphType) > -1
  );
  state.blist = data2;
  setTimeout(() => {
    draw();
  }, 1000);
};

const play = () => {
  let ids = [state.vid];
  //根据选择 获取监控点播放地址，尝试播放
  useApi
    .post("/dynamicview/ar/getcameraurl", { deviceIds: ids })
    .then((res) => {
      let urls = res.data.cameraUrls || [];
      if (urls.length > 0) {
        let url = urls[0].cameraUrl;
        state.myPlugin.JS_StopRealPlayAll();
        state.myPlugin.JS_Play(url, { playURL: url, mode: 1 }, 0).then(
          () => {
            //state.myPlugin.JS_EnableZoom(0);
          },
          (err) => {
            play();
          }
        );
      } else {
        ElMessage.error("未获取到播放地址");
      }
    });
};
const zoom = () => {
  if (state.zoom == false) {
    state.zoom = true;
    state.myPlugin.JS_EnableZoom(state.curIndex).then(
      () => {
        console.info("JS_EnableZoom success");
      },
      (err) => {
        console.info("JS_EnableZoom failed");
      }
    );
  } else {
    state.zoom = false;
    setTimeout(() => {
      initctx();
      draw();
    }, 500);
  }
};
const reget = () => {
  getData(true);
};
const setChoose = (tagid) => {
  state.blist.forEach((element) => {
    if (element.tagId == tagid) {
      element.high = true;
    } else {
      element.high = false;
    }
  });
};
defineExpose({
  zoom,
  setTypes,
  reget,
  setChoose,
});
const initPlayer = () => {
  state.myPlugin = new JSPlugin({
    szId: "play_window", //需要英文字母开头，唯一性，必填
    szBasePath: "/js/", // 必填,与h5player.min.js的引用目录一致
    bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
    // 分屏播放，默认最大分屏4*4
    iMaxSplit: 1,
    iCurrentSplit: 1,
  });

  state.myPlugin.JS_SetWindowControlCallback({
    windowEventSelect: function (index) {
      //插件选中窗口回调
      state.curIndex = index;
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      //插件错误回调
      console.error(`window-${iWndIndex}, errorCode: ${iErrorCode}`, oError);
      //ElMessage.error(`播放失败, 错误码: ${iErrorCode}`);
      play();
    },
    performanceLack: function () {
      //性能不足回调
      // do you want...
      console.error(`性能不足`);
      play();
    },
  });
  // 设置取流超时时间
  state.myPlugin.JS_SetConnectTimeOut(state.curIndex, 60).then(
    () => {
      console.info("JS_SetConnectTimeOut success");
      // do you want...
    },
    (err) => {
      console.info("JS_SetConnectTimeOut failed");
      // do you want...
    }
  );
};
const destoryPlayer = () => {
  if (state.myPlugin) {
    state.myPlugin.JS_StopRealPlayAll();
    state.myPlugin.JS_DestroyWorker();
    state.myPlugin = null;
  }
};

onMounted(() => {
  // getTypes(); //包含 getData();
  getData();
  //初始化播放组件
  initPlayer();
  initctx(); //初始化画布
  let store = useMyStore();
  store.params.ptz = { p: 1, t: 1, z: 1 };
  // window.onresize = ()=>{
  //   initctx()
  //   filterData()
  // }
  // iframe页面
  window.addEventListener("message", (event) => {
    if (event.origin === "http://192.168.1.237:5173") {
      // 确保消息来自父页面
      // initPlayer();
      // play()
      console.log(event.data);
    }
  });
});

// 子传父
const sendMessage = () => {
  window.parent.postMessage(
    {
      type: "iframe",
      data: "我是iframe页面",
    },
    "http://192.168.1.237:5173"
  );
};
//注销时 销毁组件
onBeforeUnmount(() => {
  destoryPlayer();
  if (state.socket != null) {
    state.socket.close();
  }
  //window.onresize = null
});
</script>

<style lang="scss" scoped>
.centericon {
  width: 60px;
  height: 69px;
  cursor: pointer;
}
.tagname {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 2px;
  text-shadow: 0px 2px 20px #000000;
  margin-top: 0;
}

// .videoplayer{
//   width:100%;
//   height:100%;
//   position: absolute;
//   z-index: 6;
//   pointer-events: none;
//   left: 0;
//   top:0;
// }

.rec {
  position: relative;
  .linel {
    position: absolute;
    left: 70px;
    top: 542px;
    width: 8px;
    height: 20px;
    background: #fff;
    z-index: 999;
  }
}

.fc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.mb {
  background-image: url("/images/new/outborder.png");
  // background: url('https://vp.bcdtech.cn:8787/new-port-file/webp.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.mbbj {
  background-image: url("/images/mmb.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: colorBJ 1s infinite linear;
}

@keyframes colorBJ {
  0%,
  100% {
    box-shadow: inset 0 0 50px 50px #ff000099;
  }
  50% {
    box-shadow: inset 0 0 20px 20px #ff000000;
  }
}

.cv {
  position: absolute;
  left: 0;
  right: 0;
}
.gif {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  height: calc(100% + 0px);
}
.bq {
  position: absolute;
  cursor: pointer;

  .img {
    width: 40px;
    height: 42px;
  }

  .img1 {
    position: absolute;
    left: 4px;
    top: 5px;
    width: 32px;
    height: 33px;
  }

  .img2 {
    position: absolute;
    left: 40px;
    top: -22px;
  }

  .line {
    position: absolute;
    left: 20px;
    top: -3px;
    width: 13px;
    height: 2px;
    background: #fff;
    transform: rotate(-45deg);
  }

  .txt {
    position: absolute;
    left: 50px;
    top: -22px;
    height: 28px;
    min-width: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(
      90deg,
      rgba(46, 190, 255, 0) 0%,
      rgba(30, 168, 236, 0.71) 23%,
      rgba(14, 145, 217, 0.85) 50%,
      rgba(14, 132, 204, 0.86) 74%,
      rgba(15, 123, 196, 0) 100%
    );
    border-bottom: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    border-image: linear-gradient(
        90deg,
        #ffffff00,
        #ffffff99,
        #ffffffff,
        #ffffff99,
        #ffffff00
      )
      2 2;

    .con {
      width: fit-content;
      white-space: nowrap;
      margin-left: 5px;
      padding: 0 10px;
      font-size: 12px;
      color: #ffffff;
    }

    &:before {
      content: "";
      position: absolute;
      left: 7px;
      top: 10px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
    }

    &:after {
      content: "";
      position: absolute;
      left: -19px;
      top: 12px;
      width: 30px;
      height: 2px;
      background: #fff;
    }
  }

  .txt2 {
    background: linear-gradient(
      90deg,
      #fbb31900 0%,
      #fbb319cc 23%,
      #fbb319 50%,
      #fbb319cc 74%,
      #fbb31900 100%
    );
  }
}
</style>